<!DOCTYPE html>
<html>
<head>
    <title>流式输出示例</title>
    <meta charset="UTF-8">
</head>
<body>
<h2>流式数据接收演示</h2>
<button onclick="startStream()">开始接收数据</button>
<div id="output" style="margin-top: 20px; border: 1px solid #ccc; padding: 10px;"></div>

<script>
    function startStream()
    {
        const output = document.getElementById('output');
        output.innerHTML = ''; // 清空之前的内容

        const eventSource = new EventSource('/stream');

        eventSource.onmessage = function(e) {
            const newElement = document.createElement('div');
            newElement.textContent = "print -> " + e.data;
            output.appendChild(newElement);
        };

        eventSource.onerror = function(e) {
            console.error('EventSource 错误:', e);
            eventSource.close();
            const newElement = document.createElement('div');
            newElement.textContent = "连接关闭";
            output.appendChild(newElement);
        };
    }
</script>
</body>
</html>